<!-- 评分参考 -->

<template>
  <div class="modal-box">
    <a-row :gutter="10">
      <a-col :md="4" :sm="24" >
        <!-- 左边 绩效得分记录 start -->
        <div class="table-ref">
          <div class="title">
            <span>{{ date.slice(0, 4) }}年</span>
            <span>绩效得分参考</span>
          </div>

          <a-table :loading="loadingKpi" bordered
                   :scroll="tableKpiScore.scroll"
                   :columns="tableKpiScore.columns"
                   :dataSource="tableKpiScore.dataSource"
                   :pagination="false">
          </a-table>
        </div>
        <!-- 左边 绩效得分记录 end -->
      </a-col>

      <!-- 右边 细项列表 start -->
      <a-col :md="19" :sm="24">
        <div class="table-ref">
          <div class="title">
            <span>双向评分记录参考</span>
            <span>（{{ date.slice(0, 4) + '年' + date.slice(4, 6) + '月' }}）</span>
          </div>

          <a-table :loading="loadingRef" bordered
                   :scroll="tableReference.scroll"
                   :columns="tableReference.columns"
                   :dataSource="tableReference.dataSource"
                   :pagination="getPagination()"
                   @change="onChange">

            <template v-for="item in monthArr" :slot="item"
                      slot-scope="text, record, index">
              <div :class="setClassName(item)">{{ text }}</div>
            </template>

  
          <template :slot="'scoreComments'" slot-scope="text, record, ind">
            <div class="comments-box" v-for="(item, index) in text" :key="index">
              <span v-if="text.length > 1">{{index+1}}.{{item.title}}：</span>
              <span :title="item.title">{{item.content}}</span>

              <!-- <a-tooltip placement="right" :title="item.content">
                <a-icon class="icon-more" type="message"></a-icon>
              </a-tooltip> -->
            </div>
          </template>
          </a-table>
        </div>
      </a-col>
      <!-- 右边 细项列表 end -->
    </a-row>

  </div>
</template>



<script>

  /* 引入 api 接口配置 */
  import { apiConfig } from './api.config.js';

  /* 引入表格配置文件 */
  import { tableReference, tableKpiScore, monthArr } from './table.config.js';





  export default {
    props: {
      /**
       * gm => 总经理评分
       * kpi => 绩效汇总评分
       * */
      k: '',

      /* 参考年 & 月 */
      date: String,

      /* 部门信息 */
      departInfo: {
        type: Object,
        default: null
      }
    },

    data() {
      return {
        /* 查询信息 */
        queryParam: {
          indexYearMonth: this.date,
          pageNo: 1,
          pageSize: 13
        },

        // 总条数
        total: 0,

        /* 表格数据 */
        tableKpiScore: tableKpiScore(),     // 左边绩效记录
        tableReference: tableReference(),   // 右边评分参考

        monthArr: monthArr(),

        /* 数据是否在加载中 */
        loadingKpi: false,          // 左边绩效记录
        loadingRef: false,          // 右边评分参考
      }
    },

    methods: {

      /* 动态给 class 高亮 */
      setClassName(key) {
        let currentMonthKey = 'm' + this.date.slice(4, 6);
        return (currentMonthKey === key) ? 'high_light' : '';
      },

      /* 返回表格分页数据 */
      getPagination() {
        let queryParam = this.queryParam;

        return {
          current: queryParam.pageNo,
          pageSize: queryParam.pageSize,
          total: this.total
        }
      },

      /* 监听分页器的改变 */
      onChange(pagination) {
        this.queryParam.pageNo = pagination.current;
        this.getCgDatagrid();
      },

      /* 初始化数据 */
      initData(n) {
        this.getCgDatagrid(n);        // 获取部门评分参考细项
        this.getScoreDatagrid();      // 获取绩效评分记录
      },

      /* 获取部门评分参考细项 弹窗右边 */
      getCgDatagrid(n) {
        let t = this;

        if (typeof n === 'number') { t.queryParam.pageNo = 1; }

        let departInfo = t.departInfo;
        let param = {
          indexValueCode: departInfo.indexValueCode,            // 评分指标 code
          indexDepart: departInfo.indexDepart,                  // 被评分部门
          indexScorer: departInfo.indexScorer,  // 被评分部人 
          ...t.queryParam
        };

        t.tableReference.dataSource = [];
        t.loadingRef = true;
        apiConfig[this.k].getCgDatagrid(param).then((res) => {
          t.loadingRef = false;
          let resData = res.result;

          if (!resData || (resData && resData.records && resData.records.length === 0)) {
            t.tableReference.dataSource = [];
            t.queryParam.pageNo = 1;
            t.total = 0;
            return;
          }

          t.tableReference.dataSource = resData.records;    // 更新列表
          t.queryParam.pageNo = resData.current;            // 更新页数
          t.total = resData.total;
        }).catch((error) => {
          t.loadingRef = false;
          t.$message.error(error.message);
        });
      },

      /* 获取绩效评分记录 弹窗左边显示 */
      getScoreDatagrid() {
        let departInfo = this.departInfo;
        let param = {
          indexYearMonth: this.date,                // 考核期 yyyymm
          indexDepart: departInfo.indexDepart,      // 被评分部门
          indexScorer: departInfo.indexScorer,      // 责任人
        };

        this.loadingKpi = true;
        apiConfig[this.k].getScoreDatagrid(param).then((res) => {
          this.loadingKpi = false;
          let result = res.result;
          if (!result) {
            this.tableKpiScore.dataSource = [];
            return;
          }

          let arrTem = [
            //{ month: '年度总分', key: 'mTotal', score: 0 },
            { month: '累计', key: 'mTotal', score: 0 },
            { month: '1月', key: 'm01', score: 0 },
            { month: '2月', key: 'm02', score: 0 },
            { month: '3月', key: 'm03', score: 0 },
            { month: '4月', key: 'm04', score: 0 },
            { month: '5月', key: 'm05', score: 0 },
            { month: '6月', key: 'm06', score: 0 },
            { month: '7月', key: 'm07', score: 0 },
            { month: '8月', key: 'm08', score: 0 },
            { month: '9月', key: 'm09', score: 0 },
            { month: '10月', key: 'm10', score: 0 },
            { month: '11月', key: 'm11', score: 0 },
            { month: '12月', key: 'm12', score: 0 },
          ];

          arrTem.forEach((item) => {
            item.score = result[item.key] || 0;
          });

          this.tableKpiScore.dataSource = arrTem;
        }).catch((error) => {
          this.loadingKpi = false;
          t.$message.error(error.message);
        });
      }

    }
  }
</script>



<style lang="less" scoped>

  .modal-box {
    width: 100%;

    .table-ref {
      /deep/.ant-table-tbody > tr,
      /deep/.ant-table-tbody > tr > td {
        height: 38px;
      }

      /deep/.ant-table th,
      /deep/.ant-table td { white-space: nowrap; }
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      margin-left: 4px;
    }

    .high_light {
      color: #FF6600;
      font-weight: bold;
    }
    .comments-box{
      text-align: left
    }
  }

</style>
